<template>
    <div>
        <table class="wq text-center" border="0" cellpadding="0" cellspacing="1">
            <tr class="t_list_caption">
                <td colspan="12">三军、大小</td>
            </tr>
            <tr class="t_td_text">
                <td width="10%" class="caption_1"><span class="jsk1"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:三军:1']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:三军:1']" @focus="quickbetFuns($event,'点数:三军:1')"></td>
                <td width="10%" class="caption_1"><span class="jsk2"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:三军:2']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:三军:2']" @focus="quickbetFuns($event,'点数:三军:2')"></td>
                <td width="10%" class="caption_1"><span class="jsk3"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:三军:3']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:三军:3']" @focus="quickbetFuns($event,'点数:三军:3')"></td>
                <td width="10%" class="caption_1">大</td>
                <td class="colorRed bolds odds">{{ratedata['和数:大小:大']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['和数:大小:大']" @focus="quickbetFuns($event,'和数:大小:大')"></td>
            </tr>
            <tr class="t_td_text">
                <td width="10%" class="caption_1"><span class="jsk4"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:三军:4']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:三军:4']" @focus="quickbetFuns($event,'点数:三军:4')"></td>

                <td width="10%" class="caption_1"><span class="jsk5"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:三军:5']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:三军:5']" @focus="quickbetFuns($event,'点数:三军:5')"></td>

                <td width="10%" class="caption_1"><span class="jsk6"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:三军:6']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:三军:6']" @focus="quickbetFuns($event,'点数:三军:6')"></td>
                <td width="10%" class="caption_1">小</td>
                <td class="colorRed bolds odds">{{ratedata['和数:大小:小']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['和数:大小:小']" @focus="quickbetFuns($event,'和数:大小:小')"></td>
            </tr>
        </table>
        <table class="wq text-center" border="0" cellpadding="0" cellspacing="1">
            <tr class="t_list_caption">
                <td colspan="9">围骰、全骰</td>
            </tr>
            <tr class="t_td_text">
                <td width="" class="caption_1"><span class="jsk1"></span><span class="jsk1"></span><span class="jsk1"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:围骰:1']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:围骰:1']" @focus="quickbetFuns($event,'点数:围骰:1')"></td>
                <td width="" class="caption_1"><span class="jsk2"></span><span class="jsk2"></span><span class="jsk2"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:围骰:2']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:围骰:2']" @focus="quickbetFuns($event,'点数:围骰:2')"></td>
                <td width="" class="caption_1"><span class="jsk3"></span><span class="jsk3"></span><span class="jsk3"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:围骰:3']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:围骰:3']" @focus="quickbetFuns($event,'点数:围骰:3')"></td>
            </tr>
            <tr class="t_td_text">
                <td width="" class="caption_1"><span class="jsk4"></span><span class="jsk4"></span><span class="jsk4"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:围骰:4']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:围骰:4']" @focus="quickbetFuns($event,'点数:围骰:4')"></td>
                <td width="" class="caption_1"><span class="jsk5"></span><span class="jsk5"></span><span class="jsk5"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:围骰:5']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:围骰:5']" @focus="quickbetFuns($event,'点数:围骰:5')"></td>
                <td width="" class="caption_1"><span class="jsk6"></span><span class="jsk6"></span><span class="jsk6"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:围骰:6']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:围骰:6']" @focus="quickbetFuns($event,'点数:围骰:6')"></td>
            </tr>
            <tr class="t_td_text">
                <td width="" class="caption_1">全骰</td>
                <td class="colorRed bolds odds">{{ratedata['点数:全骰:$fn']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:全骰:$fn']" @focus="quickbetFuns($event,'点数:全骰:$fn')"></td>
                <td colspan="6"></td>
            </tr>
        </table>
        <table class="wq text-center" border="0" cellpadding="0" cellspacing="1">
            <tr class="t_list_caption">
                <td colspan="12">点数</td>
            </tr>
            <tr class="t_td_text">
                <td width="8%" class="caption_1">4</td>
                <td class="colorRed bolds odds">{{ratedata['和数:点数:4']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['和数:点数:4']" @focus="quickbetFuns($event,'和数:点数:4')"></td>
                <td width="8%" class="caption_1">5</td>
                <td class="colorRed bolds odds">{{ratedata['和数:点数:5']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['和数:点数:5']" @focus="quickbetFuns($event,'和数:点数:5')"></td>
                <td width="8%" class="caption_1">6</td>
                <td class="colorRed bolds odds">{{ratedata['和数:点数:6']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['和数:点数:6']" @focus="quickbetFuns($event,'和数:点数:6')"></td>
                <td width="8%" class="caption_1">7</td>
                <td class="colorRed bolds odds">{{ratedata['和数:点数:7']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['和数:点数:7']" @focus="quickbetFuns($event,'和数:点数:7')"></td>
            </tr>
            <tr class="t_td_text">
                <td width="8%" class="caption_1">8</td>
                <td class="colorRed bolds odds">{{ratedata['和数:点数:8']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['和数:点数:8']" @focus="quickbetFuns($event,'和数:点数:8')"></td>
                <td width="8%" class="caption_1">9</td>
                <td class="colorRed bolds odds">{{ratedata['和数:点数:9']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['和数:点数:9']" @focus="quickbetFuns($event,'和数:点数:9')"></td>
                <td width="8%" class="caption_1">10</td>
                <td class="colorRed bolds odds">{{ratedata['和数:点数:10']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['和数:点数:10']" @focus="quickbetFuns($event,'和数:点数:10')"></td>
                <td width="8%" class="caption_1">11</td>
                <td class="colorRed bolds odds">{{ratedata['和数:点数:11']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['和数:点数:11']" @focus="quickbetFuns($event,'和数:点数:11')"></td>
            </tr>
            <tr class="t_td_text">
                <td width="8%" class="caption_1">12</td>
                <td class="colorRed bolds odds">{{ratedata['和数:点数:12']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['和数:点数:12']" @focus="quickbetFuns($event,'和数:点数:12')"></td>
                <td width="8%" class="caption_1">13</td>
                <td class="colorRed bolds odds">{{ratedata['和数:点数:13']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['和数:点数:13']" @focus="quickbetFuns($event,'和数:点数:13')"></td>
                <td width="8%" class="caption_1">14</td>
                <td class="colorRed bolds odds">{{ratedata['和数:点数:14']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['和数:点数:14']" @focus="quickbetFuns($event,'和数:点数:14')"></td>
                <td width="8%" class="caption_1">15</td>
                <td class="colorRed bolds odds">{{ratedata['和数:点数:15']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['和数:点数:15']" @focus="quickbetFuns($event,'和数:点数:15')"></td>
            </tr>
            <tr class="t_td_text">
                <td width="8%" class="caption_1">16</td>
                <td class="colorRed bolds odds">{{ratedata['和数:点数:16']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['和数:点数:16']" @focus="quickbetFuns($event,'和数:点数:16')"></td>
                <td width="8%" class="caption_1">17</td>
                <td class="colorRed bolds odds">{{ratedata['和数:点数:17']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['和数:点数:17']" @focus="quickbetFuns($event,'和数:点数:17')"></td>
                <td colspan="6"></td>
            </tr>
        </table>
        <table class="wq text-center" border="0" cellpadding="0" cellspacing="1">
            <tr class="t_list_caption">
                <td colspan="9">长牌</td>
            </tr>
            <tr class="t_td_text">
                <td width="" class="caption_1"><span class="jsk1"></span><span class="jsk2"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:长牌:1,2']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:长牌:1,2']" @focus="quickbetFuns($event,'点数:长牌:1,2')"></td>
                <td width="" class="caption_1"><span class="jsk1"></span><span class="jsk3"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:长牌:1,3']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:长牌:1,3']" @focus="quickbetFuns($event,'点数:长牌:1,3')"></td>
                <td width="" class="caption_1"><span class="jsk1"></span><span class="jsk4"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:长牌:1,4']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:长牌:1,4']" @focus="quickbetFuns($event,'点数:长牌:1,4')"></td>
            </tr>
            <tr class="t_td_text">
                <td width="" class="caption_1"><span class="jsk1"></span><span class="jsk5"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:长牌:1,5']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:长牌:1,5']" @focus="quickbetFuns($event,'点数:长牌:1,5')"></td>
                <td width="" class="caption_1"><span class="jsk1"></span><span class="jsk6"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:长牌:1,6']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:长牌:1,6']" @focus="quickbetFuns($event,'点数:长牌:1,6')"></td>
                <td width="" class="caption_1"><span class="jsk2"></span><span class="jsk3"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:长牌:2,3']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:长牌:2,3']" @focus="quickbetFuns($event,'点数:长牌:2,3')"></td>
            </tr>
            <tr class="t_td_text">
                <td width="" class="caption_1"><span class="jsk2"></span><span class="jsk4"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:长牌:2,4']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:长牌:2,4']" @focus="quickbetFuns($event,'点数:长牌:2,4')"></td>
                <td width="" class="caption_1"><span class="jsk2"></span><span class="jsk5"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:长牌:2,5']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:长牌:2,5']" @focus="quickbetFuns($event,'点数:长牌:2,5')"></td>
                <td width="" class="caption_1"><span class="jsk2"></span><span class="jsk6"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:长牌:2,6']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:长牌:2,6']" @focus="quickbetFuns($event,'点数:长牌:2,6')"></td>
            </tr>
            <tr class="t_td_text">
                <td width="" class="caption_1"><span class="jsk3"></span><span class="jsk4"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:长牌:3,4']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:长牌:3,4']" @focus="quickbetFuns($event,'点数:长牌:3,4')"></td>
                <td width="" class="caption_1"><span class="jsk3"></span><span class="jsk5"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:长牌:3,5']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:长牌:3,5']" @focus="quickbetFuns($event,'点数:长牌:3,5')"></td>
                <td width="" class="caption_1"><span class="jsk3"></span><span class="jsk6"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:长牌:3,6']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:长牌:3,6']" @focus="quickbetFuns($event,'点数:长牌:3,6')"></td>
            </tr>
            <tr class="t_td_text">
                <td width="" class="caption_1"><span class="jsk4"></span><span class="jsk5"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:长牌:4,5']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:长牌:4,5']" @focus="quickbetFuns($event,'点数:长牌:4,5')"></td>
                <td width="" class="caption_1"><span class="jsk4"></span><span class="jsk6"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:长牌:4,6']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:长牌:4,6']" @focus="quickbetFuns($event,'点数:长牌:4,6')"></td>
                <td width="" class="caption_1"><span class="jsk5"></span><span class="jsk6"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:长牌:5,6']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:长牌:5,6']" @focus="quickbetFuns($event,'点数:长牌:5,6')"></td>
            </tr>
        </table>
        <table class="wq text-center" border="0" cellpadding="0" cellspacing="1">
            <tr class="t_list_caption">
                <td colspan="9">短牌</td>
            </tr>
            <tr class="t_td_text">
                <td width="" class="caption_1"><span class="jsk1"></span><span class="jsk1"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:短牌:1']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:短牌:1']" @focus="quickbetFuns($event,'点数:短牌:1')"></td>
                <td width="" class="caption_1"><span class="jsk2"></span><span class="jsk2"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:短牌:2']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:短牌:2']" @focus="quickbetFuns($event,'点数:短牌:2')"></td>
                <td width="" class="caption_1"><span class="jsk3"></span><span class="jsk3"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:短牌:3']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:短牌:3']" @focus="quickbetFuns($event,'点数:短牌:3')"></td>
            </tr>
            <tr class="t_td_text">
                <td width="" class="caption_1"><span class="jsk4"></span><span class="jsk4"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:短牌:4']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:短牌:4']" @focus="quickbetFuns($event,'点数:短牌:4')"></td>
                <td width="" class="caption_1"><span class="jsk5"></span><span class="jsk5"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:短牌:5']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:短牌:5']" @focus="quickbetFuns($event,'点数:短牌:5')"></td>
                <td width="" class="caption_1"><span class="jsk6"></span><span class="jsk6"></span></td>
                <td class="colorRed bolds odds">{{ratedata['点数:短牌:6']}}</td>
                <td><input type="text" class="moneyinp" v-model="moneydata['点数:短牌:6']" @focus="quickbetFuns($event,'点数:短牌:6')"></td>
            </tr>
        </table>

    </div>
</template>
<script>
    
    var timer = null;
    import axios from 'axios'
    import {lotterytype} from '../../../../assets/js/lotterytype.js'
    export default {
        name: "SicBo",
        props: {  //普通类型：String、Number、Boolean、Null    引用类型： Array、Object
            betmoney: {   //   下注金额
                type: String,
                required: true
            },
            resetinp: {   //   是否重填已下注金额  0为未下注  其他为已下注
                type: Number,
                required: true
            },
            openBet: {  //开奖  可下注
                type: Boolean,
                required: true
            },
            ninetime: {  //90s
                type: Number,
                required: true
            },
        },
        data(){
            return{
                ratedata: {},  //实时赔率
                params: {},  //菜单
                moneydata: {},
                betdataArr: [],  //下注 提交data
                nowitem: '',  //当前操作的下注item号
                arr: [],  //
            }
        },
        methods: {
            init(){
                var _this = this;
                // console.log(this.$route.query);

                this.params = lotterytype.apiParams(this.$route.query.id,this.$route.query.levelid);

                if(window.localStorage.Authorization){
                    _this.$httpGet('/api/game/listRate/'+ _this.params.nowlottery + '/' + _this.params.levellottery +'oa18').then(response => {
                        
                        if(response.status == 200){
                            _this.ratedata = response.data.rates;

                            if(response.data.need){
                                _this.$httpPost('/api/setting/rateItem/'+ _this.params.nowlottery + '/' + _this.params.levellottery +'oa18').then(response => {
                                
                                    if(response.status == 200){
                                        
                                    }

                                });
                            }
                        }

                    });

                }
                
            },
            inits(){
                var _this = this;
                // console.log(this.$route.query);

                this.params = lotterytype.apiParams(this.$route.query.id,this.$route.query.levelid);

                if(window.localStorage.Authorization){
                    
                    if (timer) {
                        clearInterval(timer);
                        timer = null;
                    }

                    _this.$httpGet('/api/game/listRate/'+ _this.params.nowlottery + '/' + _this.params.levellottery +'oa18').then(response => {
                        
                        if(response.status == 200){
                            _this.ratedata = response.data.rates;

                            if(response.data.need){
                                _this.$httpPost('/api/setting/rateItem/'+ _this.params.nowlottery + '/' + _this.params.levellottery +'oa18').then(response => {
                                
                                    if(response.status == 200){
                                        
                                    }

                                });
                            }

                            timer = setInterval(() => {
                                _this.inits();
                            }, 10 * 1000)
                        }

                    });

                }
                
            },
            //快捷下注
            quickbetFuns(ev,item,odds){
                var _this = this;
                if(_this.betmoney){

                    // Vue.set方法用来新增对象的属性。
                    _this.$set(_this.moneydata, item, _this.betmoney);
                    
                }
                _this.nowitem = item;
            },
            
        },
        mounted(){
            this.inits();
        },
        beforeDestroy(){
            clearInterval(timer);
        },
        watch :{
            resetinp: function(now,old){

                if(now != 0){   //重填下注金额

                    this.moneydata = {};  //清空所有下注金额
                    this.betdataArr = [];
                    this.arr = [];
                    
                }
            },
            moneydata: {
                
                //注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象
　　　　　　　　　handler(newValue, oldValue) {

                    var _this = this;
        // 　　　　　　console.log(newValue[this.nowitem],newValue,this.nowitem)

                    if(newValue[_this.nowitem] != '' && newValue[_this.nowitem] != '0' && newValue[_this.nowitem] != undefined){

                        if (_this.arr.indexOf(_this.nowitem) == -1) {
                            _this.arr.push(_this.nowitem);
                            _this.betdataArr.push({'item': _this.nowitem,'value': newValue[_this.nowitem],'balls': []});
                        } else {
                            for(var i=0;i<_this.betdataArr.length;i++){

                                if(_this.nowitem == _this.betdataArr[i].item){
                                    _this.betdataArr[i].value= newValue[_this.nowitem];
                                }
                            }
                        }


                    }else{  //当前改变值为空

                        for(var i=0;i<_this.betdataArr.length;i++){

                            if(_this.betdataArr[i].item == _this.nowitem){
                                _this.betdataArr.splice(i,1);
                            }

                        }

                    }

                    var betdataObj = {};
                    betdataObj.game = _this.params.nowlottery;
                    betdataObj.items = _this.betdataArr;
                    
                    if(_this.betdataArr.length == 0){
                        _this.$emit('betdataObj',{});
                    }else{
                        _this.$emit('betdataObj',betdataObj);
                    }
                    // console.log('------watch',betdataObj);

        　　　　 },
        　　　　 deep: true
            },
            openBet: function(now,old){
                console.log(now,old);
                this.init();
            },
            ninetime: function(now,old){
                console.log('------------90s  刷新');
                //90s  刷新数据
                this.init();
            },
        },
    }
</script>
